<template>
  <div style="margin-left:30px">
      <h3>滚动条插件</h3>
      <!-- 外层盒子 -->
    <div style="height:200px;width:600px;background-color:#ccc;">
        <!-- 这里的标签名称要和main.js文件中定义的组件名称保持一致 -->
        <happy-scroll color="rgba(0,0,0,0.5)" size="7" hide-horizontal resize>
            <!-- 内层盒子--内容区 -->
            <div class="con">
                <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
                <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
                <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
                <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
                <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
                <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
                <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
                <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
                <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
                <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
            </div>
        </happy-scroll>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="scss">
    .con{
        height: 280px;
        // height: 2800px;
    }
</style>